<template>
  <div class="icons">
    <swiper ref="mySwiper" :options="swiperOption" v-if="showSwiper">
      <swiper-slide v-for="(page, index) in pages" :key="index">
        <div class="icon" v-for=" item in page" :key="item.id">
          <div class="icon-img">
            <img class="iconfont icon-img-content" :src="item.imgUrl" />
          </div>
          <p class="img-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
  </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        autoplay: false,
        loop: true
      },
      iconList: [
        {
          id: '001',
          iconUrl: 'http://p5.qhimg.com/t01869c603d5b349246.png',
          desc: '热门景点'
        },
        {
          id: '002',
          iconUrl: 'http://p5.qhimg.com/t01869c603d5b349246.png',
          desc: '热门景点'
        },
        {
          id: '003',
          iconUrl: 'http://p5.qhimg.com/t01869c603d5b349246.png',
          desc: '热门景点'
        },
        {
          id: '004',
          iconUrl: 'http://p5.qhimg.com/t01869c603d5b349246.png',
          desc: '热门景点'
        },
        {
          id: '005',
          iconUrl: 'http://p5.qhimg.com/t01869c603d5b349246.png',
          desc: '热门景点'
        },
        {
          id: '006',
          iconUrl: 'http://p5.qhimg.com/t01869c603d5b349246.png',
          desc: '热门景点'
        },
        {
          id: '007',
          iconUrl: 'http://p5.qhimg.com/t01869c603d5b349246.png',
          desc: '热门景点'
        },
        {
          id: '008',
          iconUrl: 'http://p5.qhimg.com/t01869c603d5b349246.png',
          desc: '热门景点'
        },
        {
          id: '009',
          iconUrl: 'http://p5.qhimg.com/t01869c603d5b349246.png',
          desc: '热门景点'
        }
      ]
    }
  },
  computed: {
    pages () {
      var pages = []
      this.list.forEach((item, index) => {
        const count = Math.floor(index / 8)
        if (!pages[count]) {
          pages[count] = []
        }
        pages[count].push(item)
      })
      return pages
    },
    showSwiper () {
      return this.list.length
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/minix.styl'
  .icons
    height: 0
    overflow: hidden
    padding-bottom: 50%
    .icon
      position: relative
      width: 25%
      padding-bottom: 25%
      float: left
      .icon-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: .44rem
        padding: .5rem
        box-sizeing: border-box
        .icon-img-content
          display: block
          height: 100%
          text-align: center
          padding-left: 0.2rem
      .img-desc
        position: absolute
        left: 0
        right: 0
        bottom: 0
        height: .44rem
        text-align: center
        ellipsis()
</style>
